<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入bootstrap样式表 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/chat.css" rel="stylesheet">
    <title>Node.js + Socket.io 实现一对一私聊</title>
</head>
<body>
    <!-- 获取到了参数中的发送者和接受者 query={sender='赵敏',receiver='聂小倩'}-->
    <script src="./js/parse-params.js"></script>
    <div class="container">
      <div class="chat-header row">
        <span class="col-xs-2 chat-header-left glyphicon glyphicon-menu-left"></span>
        <!-- 存放接受者姓名 -->
        <span class="col-xs-8 chat-header-center" id="chatHeaderCenter"></span>
        <span class="col-xs-2 chat-header-right glyphicon glyphicon-option-horizontal"></span>
      </div>
      <div class="chat-content" id="chatContent">
      </div>
      <div class="chat-bottom row">
        <span class="col-xs-10 col-md-11 input-text"><input type="text" class="form-control " id="inputText" placeholder="请输入要发送的内容..."></span>
        <span class="col-xs-2 col-md-1 span-submit">
          <input class="btn btn-default btn-primary input-submit" id="sendBtn" data-dismiss="alert" type="submit" value="发送">
        </span>
      </div>
    </div>
    <!-- 引入jquery的原因是bootstrap.min.js里面用到了 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 用于引入 Bootstrap JavaScript 文件。 -->
    <!-- 通过引入这个脚本文件，你可以在你的网页中使用 Bootstrap 提供的交互式组件和特性。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
    <!-- src 属性：指定要执行的脚本文件的地址。在这里，
      它指向了 /socket.io/socket.io.js，这是 Socket.IO 服务器默认提供的客户端 JavaScript 文件的路径。 -->
    <!-- 这行代码的作用是从 Socket.IO 服务器的路径中引入客户端的 JavaScript 文件，以便在客户端使用 Socket.IO 提供的实时通信功能。 -->
    <!-- 通过引入 /socket.io/socket.io.js，你可以在客户端使用 Socket.IO 提供的 API，例如连接到 Socket.IO 服务器、发送和接收实时消息等。这对于构建实时应用程序、聊天应用、在线协作工具等非常有用。 -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/chat.js"></script>
</body>
</html>